<template>
  <div class="flex flex-justify-between p-5px">
    <div class="context flex flex-items-center" ref="panel">
      <p class="mr-20px text-16px w-80px font-600">{{ label }}</p>
      <slot>
        <div v-for="item in 30" :key="item">1213</div>
      </slot>
    </div>
    <div
      @click="hangdleSwitch"
      v-if="isShow"
      class="cursor-pointer ml-20px w-60px mt-15px"
    >
      <div class="flex w-60px">
        <div class="mr-5px text-16px">{{ panelShow ? foldTitle[0] : foldTitle[1] }}</div>
        <el-icon v-show="panelShow" :size="18"><ArrowUp /></el-icon>
        <el-icon v-show="!panelShow"  :size="18"><ArrowDown /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  initHeight: {
    type: String,
    default: () => '50px',
  },
  unfoldHeight: {
    type: String,
    default: () => '200px',
  },
  label: {
    type: String,
    default: () => '',
  },
  isShow: {
    type: Boolean,
    default: true,
  },
  foldTitle: {
    type: Array,
    default: ['收起', '更多'],
  },
  position: {
    type: String,
    default: () => 'right',
  },
})
const panel = ref(false)
const panelShow = ref(false)

const hangdleSwitch = () => {
  if (panelShow.value) {
    panel.value.style.height = props.initHeight
    panelShow.value = false
  } else {
    panel.value.style.height = props.unfoldHeight
    panelShow.value = true
  }
}
</script>

<style scoped lang="scss">
.context {
  height: 50px;
  overflow: hidden;
  transition: all 0.3s;
}
</style>
